import { useState } from 'react'
import { CascadePickerView } from '@/library/gallery/components/CascadePickerView'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { AsyncDemo } from './asyncDemo'
import { options } from './options'

const DemoCascadePickerView: React.FC<unknown> = () => {
  const [value, setValue] = useState<(string | number | null)[]>(['江苏', '苏州'])

  return (
    <>
      <DemoBlock title="基础用法" padding="0">
        <CascadePickerView options={options} />
      </DemoBlock>

      <DemoBlock title="自定义高度" padding="0">
        <CascadePickerView options={options} style={{ '--height': '136px' }} />
      </DemoBlock>

      <DemoBlock title="受控模式" padding="0">
        <CascadePickerView
          options={options}
          value={value}
          onChange={(val, ext) => {
            setValue(val)
            console.log('onChange', val, ext)
          }}
        />
      </DemoBlock>

      <DemoBlock title="异步获取选项" padding="0">
        <AsyncDemo />
      </DemoBlock>
    </>
  )
}

export default DemoCascadePickerView
